{extend name='public/layout'/}
<!-- 本页面要使用的css开始 -->
{block name='css'}
<link rel="stylesheet" type="text/css" href="__STATIC__/api/css/pay.css?v={:time()}" />
{/block}
<!-- 本页面要使用的css结束 -->
<!-- 本页面要使用的js开始 -->
{block name='js'}
<script src="__STATIC__/api/js/pay.js?v={:time()}" type="text/javascript" charset="utf-8"></script>
{/block}
<!-- 本页面要使用的js结束 -->
<!-- 页面主体开始 -->
{block name='app'}
<div class="wrap">
	<div class="pay-head clearfix">
		<img src="__STATIC__/api/images/shopImg.png" alt="" class="pay-head-fl fl">
		<div class="pay-head-fr fl">
			<p class="name">{$store_info.title}</p>
			<p class="cashcard"><i></i>代金券可用门店</p>
		</div>
	</div>
	<div class="pay-num">
		<span>消费金额：</span>
		<input type="text" placeholder="0.00" v-model="payMoney">
		<span>元</span>
	</div>
	<div class="pay-foot clearfix" >
		<p class="pay-foot-fl fl"><i></i>可用代金券</p>
		<div class="pay-foot-fr fr" 
		@click="open(payList2[0].cashcard_price)"
		v-if="choose==false"
		>
			<p>{{cashcardNum}}张可用</p>
			<i></i>
		</div>
		<div class="pay-foot-fr fr" 
		@click="open(payList[0].cashcard_price)"
		v-else>
			<span>-{{deductions}}</span>
		</div>
	</div>

</div>
<div class="drawer" :class="{right:isActive}">
	<div class="wrap">
		<div class="used">
			<p class="title">可用代金券({{cashcardNum}})</p>
			<ul>
				<li class="clearfix usedList" 
				v-for="(item,index) in payList2" 
				@click="cheack(index,item.cashcard_price,item.id)"
				>
					<div class="voucher-money fl">
						<p class="p1"><span>￥</span>{{item.cashcard_price}}</p>
						<p class="p2">{{item.cate_name}}</p>
					</div>
					<div class="voucher-name fl">
						<p class="p1">{{item.title}}</p>
						<p class="p2">{{item.expire_at}}到期到期</p>
					</div>
					<div class="cheack" 
					v-if="selectIndex==index"
					>
						<img src="__STATIC__/api/images/icon/cheack.png" alt="">
					</div>
				</li>
			</ul>
		</div>
		<div class="used">
			<p class="title">不可用代金券({{payList3.length}})</p>
			<ul>
				<li class="clearfix usedList2" 
				v-for="(item,index) in payList3" 
				>
					<div class="voucher-money fl">
						<p class="p1"><span>￥</span>{{item.cashcard_price}}</p>
						<p class="p2">{{item.cate_name}}</p>
					</div>
					<div class="voucher-name fl">
						<p class="p1">{{item.title}}</p>
						<p class="p2">{{item.expire_at}}到期到期</p>
					</div>
				</li>
			</ul>

		</div>
	</div>
</div>
<div class="confirm clearfix">
	<div class="wrap">
		<div class="pay" v-if="isActive == false">
			<p class="confirm-fl fl"><span>需支付</span>￥{{actual_pay}}</p>
			<p class="confirm-fr fr" @click="pay()">确定</p>
		</div>
		<div class="pay2" v-else>
			<p class="confirm-fl fl"><span>可抵扣</span>￥{{deductions}}</p>
			<p class="confirm-fr fr" @click="close()">确定</p>
		</div>
	</div>
</div>
{include file='public/copyright' /}
{/block}
